<template>
  <div class="popup">
    <div class="main">
      <div class="main-header">
        <p>
          批量关联
          <span class="font-14">
            *红人的<span class="font-14"> 联系状态、合作状态、视频</span>等信息会<span class="font-14"> 同步</span>的移动进目标推广计划里面
          </span>
        </p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>

      <div class="detail">
        <div class="platform-list flex-center flex-align-items-center">
          <div v-for="(item, index) in platformList" :key="index" class="flex-center flex-align-items-center pointer"
            :class="{ active: item.name === form.platform }" @click="platformChange(item.name)">
            <img :src="item.icon">
          </div>
        </div>

        <el-table :data="list" :height="tableHeight" style="width: 100%;" class="table"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" fixed="left" />
          <el-table-column label="全选" width="180" fixed="left">
            <template #default="scope">
              <div class="row-name flex flex-align-items-center" @click="toDetail(scope.row.id)">
                <img :src="scope.row.avatar">
                <p class="font-16-B ellipsis-1">{{ scope.row.name }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="source" label="所属平台" width="120" />
          <el-table-column prop="country" label="国家" width="80" />
          <el-table-column label="粉丝量" width="128">
            <template #default="scope">
              <p class="font-14">{{ numConvert(scope.row.fansNum, 2) }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="avgInteractRate" label="联系状态" width="128" />
          <el-table-column prop="averageInteractionRate" label="合作阶段" width="128" />
          <el-table-column prop="averageInteractionRate" label="跟进人" width="128" />
        </el-table>

        <div class="pagination flex">
          <el-pagination layout="prev, pager, next, total" :total="form.total" @current-change="currentChange" />
        </div>
      </div>
      <div class="btns flex flex-align-items-center">
        <p class="font-14 pointer" @click="submit">确认关联</p>
      </div>
    </div>
  </div>

  <add-to-plan v-if="addToPlanShow" :selectList="tableSelect" @close="addToPlanShow = false"></add-to-plan>
</template>

<script setup>
import AddToPlan from './addToPlan.vue';
import { defineEmits, defineProps, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import numConvert from '@/js/numConvert';

const props = defineProps(['selectList']);
const emit = defineEmits(['close']);

const platformList = [
  {
    name: "YouTube",
    icon: require('../../../../../assets/icon-1.png')
  },
  {
    name: "TikTok",
    icon: require('../../../../../assets/icon-2.png')
  },
  {
    name: "Instagram",
    icon: require('../../../../../assets/icon-3.png')
  }
];

const addToPlanShow = ref(false);
const form = ref({
  platform: 'YouTube',
  page: 1,
  perPage: 10
});
const tableHeight = ref(window.innerHeight - 264);
const list = ref([
  {
    id: 1,
    name: 'xxxx',
    fansNum: 11111
  }
]);
const tableSelect = ref([]);

const platformChange = e => {
  if (form.value.platform !== e) {
    form.value.platform = e;
    form.value.page = 1;
  }
}
const handleSelectionChange = e => {
  tableSelect.value = e;
}
const close = () => {
  emit('close', null);
}
const currentChange = e => {
  form.value.page = e;
  // queryScheduleList();
}
const submit = () => {
  if (tableSelect.value.length === 0) {
    ElMessage.error('请选择红人');
    return
  }

  addToPlanShow.value = true;
}
</script>

<style lang="less" scoped>
.popup {
  .main {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    width: 1000px;
    height: 100%;
    background: #fff;

    .main-header {
      span {
        color: #333;
        padding-left: 14px;
        font-weight: 400;

        span {
          color: @main-color;
          padding-left: 0;
        }
      }
    }

    .detail {
      padding: 16px 24px;

      .platform-list {
        margin-bottom: 16px;
        width: 159px;
        height: 44px;
        border-radius: 10px;
        background: #f8f8f8;
        overflow: hidden;

        div {
          width: 53px;
          height: 44px;
          border-radius: 10px;

          &.active {
            border: 1px solid #ff5277;
            background: rgba(255, 82, 119, .1);
          }

          img {
            width: 24px;
            height: 24px;
          }
        }
      }

      .pagination {
        margin-top: 16px;
      }
    }

    .btns {
      height: 72px;
      background: #fff;
      box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, .04);
      justify-content: end;
      padding-right: 35px;

      p {
        width: 100px;
        height: 40px;
        background: @main-color;
        color: #fff;
        border-radius: 10px;
        text-align: center;
        line-height: 40px;
      }
    }
  }
}
</style>
